<template>
    <div class="comment">
        <img :src="props.user.img" alt="">
        <div class="commentcontainer">
            <div class="userName">{{props.user.userName}}</div>
            <div class="content">{{props.comment.content}}</div>
        </div>
    </div>
</template>

<script setup>
const props = defineProps(['comment','user'])
</script>

<style lang="scss" scoped>

.comment {
        position: relative;
        padding-top: 3px;
        border-top: calc(100vw * 3 / 1920) solid #1e1c1f;
        img {
            display: block;
            position: absolute;
            top: calc(100vw * -3 / 1920);
            right: calc(100vw * -3 / 1920);
            bottom: calc(100vw * -3 / 1920);
            left: calc(100vw * -3 / 1920);
            border: 1px solid #302e31;
            border-radius: calc(100vw * 55 / 1920);
            width: calc(100vw * 55 / 1920);
            height: calc(100vw * 55 / 1920);
        }

        .commentcontainer {
            display: flex;
            flex-direction: column;
            justify-content: start;
            height: calc(100vw * 60 / 1920);
            padding-left: calc(100vw * 70 / 1920);
            .userName {
                font-size:calc(100vw * 12 / 1920);
                box-sizing: border-box;
                width: 100%;
                color: #fff;
                word-break: break-all;
                padding: calc(100vw * 5 / 1920);
            }

            .content {
                font-size:calc(100vw * 12 / 1920);
                box-sizing: border-box;
                color: #b2b0b3;
            }
        }
    }

</style>